<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}">银龄乐游</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <header th:replace="fragments/header :: header"></header>

    <main class="container">
        <section class="banner">
            <h1 style="font-size: 48px;">专为长辈设计的品质旅程</h1>
            <p style="font-size: 32px;">慢节奏行程 | 专业随队医护 | 适老化住宿</p>
        </section>

        <section class="feature-trips">
            <h2 style="font-size: 40px;">热门行程推荐</h2>
            <div class="trip-card" style="margin: 2rem auto; max-width: 800px;">
                <img th:src="@{/images/VCG江南.jpg}" alt="江南图片" 
                     style="height: 350px; object-position: center 30%;">
                <h3 style="font-size: 36px;">江南水乡三日游</h3>
                <p style="font-size: 28px;">乌镇+西塘+周庄，含早午晚餐，每日10:00出发</p>
                <div class="button-container">
                    <a th:href="@{/trip-detail(id=1)}" class="cta-button">查看详情</a>
                </div>
            </div>
            <div class="trip-card">
                <img th:src="@{/images/VCG圆明园.jpg}" alt="圆明园图片" style="width: 100%; height: auto; border-radius: 10px; margin-top: 20px; border: 2px solid #b0eef1;">
                <h3 style="font-size: 36px;">京郊红叶赏秋</h3>
                <p style="font-size: 28px;">香山+颐和园，配备轮椅租赁，随队医生全程陪同</p>
                <div class="button-container">
                    <a th:href="@{/trip-detail(id=2)}" class="cta-button">查看详情</a>
                </div>
            </div>
        </section>
    </main>

    <footer th:replace="fragments/footer :: footer"></footer>
    <script>
        function setMainPadding() {
            const footer = document.querySelector('footer');
            const main = document.querySelector('main.container');
            const footerHeight = footer.offsetHeight;
            main.style.paddingBottom = footerHeight + 'px';
        }

        // 页面加载完成时设置
        window.addEventListener('load', setMainPadding);
        // 窗口大小改变时重新设置
        window.addEventListener('resize', setMainPadding);
    </script>
</body>
</html>